<template>
  <div id="app">
    <!--<v-header v-bind:`seller`="seller"></v-header>-->
    <v-header v-bind:seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <router-link to="Goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="Ratings">评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="Seller">商家</router-link>
      </div>
    </div>
    <!-- 路由匹配到的组件将渲染在这里 把seller对象传递给 各个组件 -->
    <router-view v-bind:seller="seller"></router-view>

  </div>
</template>

<script>
  import header from './components/header/Header.vue';

  const ERR_OK = 0;
  export default {
    name: 'App',
    data () {
      return {
        seller: {}
      };
    },
    created () {
      // router 默认加载的页面
      this.$router.push('Goods');
      this.$http.get('/api/seller').then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.seller = Object.assign({}, this.seller, response.data);
          console.log(this.seller.name);
        }
        ;
      }, (response) => {

      });
    },
    components: {
      'v-header': header
    }
  };
</script>
<style lang="stylus" ref="stylesheet/stylus">
  @import "common/stylus/mixin.styl";
  .tab
    width 100%
    height 40px
    line-height 40px
    display flex
    flex-direction row
    /* 容器内元素 换行*/
    flex-wrap nowrap
    justify-content flex-start
    border-1px(rgba(7, 17, 27, 0.3))

    .tab-item
      flex 1
      text-align center /*router-link 会默认渲染成 a标签 所以 设置 a标签的样式就好使
      router-link-active 是激活选中的状态
      */

      & > a
        color rgb(77, 78, 93)
        display block
        font-size 14px

      .router-link-active
        color: rgb(240, 20, 20)

</style>
